<template>
  <div class="signup">
    <i
      class="iconfont icon-blt_fangxiang_zuo_fanhui"
      style="
        position: absolute;
        top: 0.4rem;
        left: 0.2rem;
        font-size: 0.4rem;
        color: white;
      "
      @click="returned()"
    ></i>
    <img src="/favicon.ico" alt="" />
    <div class="bottom">
      <div class="input">
        <input
          @blur="tel()"
          v-model="value"
          type="text"
          placeholder="请输入手机号"
        /><br />
        <span ref="tel" style="display: none">格式错误,请重新输入</span><br />
        <span></span>
      </div>
      <div class="input">
        <input
          @blur="userpwd()"
          v-model="userspwd"
          type="password"
          placeholder="请输入密码"
        /><br />
        <span ref="userpwd" style="display: none">密码至少六位</span>
        <span></span>
      </div>
      <button @click="reg()">一键登录</button>
    </div>
  </div>
</template>
<script>
import { getdata } from "@/api/getlink";
export default {
  data() {
    return {
      value: "",
      userspwd: "",
      telbool: false,
      pwdbool: false,
    };
  },
  methods: {
    returned() {
      this.$router.go(-1);
    },
    reg() {
      if (this.telbool && this.pwdbool) {
        getdata("/proxy/unique", {
          tel: this.value,
          userpwd: this.userspwd,
        }).then((ok) => {
          if (ok.data.code === 0) {
            window.location.href = "http://localhost:8888/";
          }
        });
      }
    },
    tel() {
      let reg = /^1\d{10}$/;
      if (reg.test(this.value)) {
        this.$refs.tel.style.display = "none";
        this.telbool = true;
      } else {
        this.$refs.tel.style.display = "block";
        this.telbool = false;
      }
    },
    userpwd() {
      let pwdreg = /^.{6}$/;
      if (pwdreg.test(this.userspwd)) {
        this.$refs.userpwd.style.display = "none";
        this.pwdbool = true;
      } else {
        this.$refs.userpwd.style.display = "block";
        this.pwdbool = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.signup {
  position: relative;
  padding: 2.5rem 0 0;
  background-color: #dc2b21;
  height: 100%;
  img {
    margin: 0 auto 4rem;
    width: 1.4rem;
    height: 1.4rem;
  }
  .bottom {
    width: 100%;
    text-align: center;
    .input {
      height: 1.2rem;
    }
    input {
      width: 5.4rem;
      height: 0.8rem;
      border-radius: 0.32rem;
      border: 0.01rem solid #b67169;
      padding: 0.15rem 0.3rem;
      font-size: 0.3rem;
    }
    span {
      font-size: 0.26rem;
      color: #fff;
    }
    button {
      width: 5.4rem;
      height: 0.8rem;
      border-radius: 0.32rem;
      border: 0.01rem solid #b67169;
      padding: 0.15rem 0.3rem;
      font-size: 0.3rem;
      color: #d83632;
      font-weight: 700;
    }
  }
}
</style>
